<!--
 * @Author: IBOSS 2776641037@qq.com
 * @Date: 2025-08-04 11:22:55
 * @LastEditors: IBOSS 2776641037@qq.com
 * @LastEditTime: 2025-08-11 13:48:59
 * @FilePath: \nuxt-js\pages\news\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <nuxt-link to="/" class="button--green">
      首页
    </nuxt-link>

    <p class="indexTitleRed">
      今日视线
    </p>

    <ul>
      <li>
        <nuxt-link to="/news/list?id=1">
          新闻1
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/news/list?id=2">
          新闻2
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/news/list?id=3">
          新闻3
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'News',
  // 指定页面切换过度效果
  transition: 'test',
  data () {
    return {
      title: '新闻列表'
    }
  },
  // 自定义head内容
  head () {
    return {
      title: this.title,
      meta: [
        // 设置 description
        {
          hid: 'description',
          name: 'description',
          content: '这是新闻列表'
        },
        // 设置 keywords
        {
          hid: 'keywords',
          name: 'keywords',
          content: '今日视线'
        }
      ]
    }
  },
    
  // 使用 fetch 替代 asyncData，更好的错误处理
  async fetch () {
    try {
      // 现在可以直接使用相对路径，axios 会自动添加 /adminapi 前缀
      const { data: res } = await this.$axios.get('/cms/cms')
      console.log('获取到的数据:', res)
      
      // 如果返回的数据结构不同，进行适配
      this.list = Array.isArray(res) ? res : (res.data || res.list || [])
    } catch (error) {
      console.error('获取数据失败:', error)
      // 如果代理接口失败，使用备用接口
      try {
        const { data: res } = await this.$axios.get('/cms/cms?pid=0&title=&page=1&limit=20')
        this.list = res.data || []
      } catch (fallbackError) {
        console.error('备用接口也失败:', fallbackError)
        this.list = []
      }
    }
  },



}
</script>

<style>
</style>
